<template>
	<el-container>
		<el-header height="80" class="condition_wrap">
			<el-row :gutter="20"
				style="align-items: center; display: flex; color: #606266; width: 100%; text-align: right">
				<el-col :span="3">
					<span class="condition_name">用户ID：</span>
				</el-col>
				<el-col :span="5">
					<el-input type="number" min="0" v-model.number="searchId" placeholder="输入ID以检索"></el-input>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">用户名：</span>
				</el-col>
				<el-col :span="5">
					<el-input v-model="searchUserName" placeholder="输入用户名以检索"></el-input>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">角色：</span>
				</el-col>
				<el-col :span="5" style="text-align: left">
					<el-select v-model="searchRole">
						<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<el-button size="medium" @click="resetSearchForm">重置</el-button>
		</el-header>
		<el-main class="table_wrap">
			<el-row :gutter="20" style="margin: 0; padding: 20px 0; width: 100%; display: flex; align-items: center">
				<el-col :span="5">
					<span class="table_title">用户列表</span>
				</el-col>
				<el-col :offset="16" :span="3" style="text-align: right;">
					<el-button v-if="this.$store.state.user.role === 1" icon="el-icon-plus" type="primary"
						@click="showUserAddDialog">
						添加用户
					</el-button>
				</el-col>
				<el-col :span="2" style="text-align: right; padding: 0;">
					<el-button icon="el-icon-refresh" type="primary" @click="refresh" :loading="loading">刷新</el-button>
				</el-col>
			</el-row>
			<el-table v-loading="loading" :data="tableData" height="720" class="user_table" :header-cell-style="{ 'background-color': '#477f5810', 'text-align': 'center'}" :cell-style="{'text-align':'center'}">
				<el-table-column label="序号" width="200">
					<template v-slot:default="scope">
						<i class="el-icon-s-custom"></i>
						<span style="margin-left: 10px">{{ scope.row.index }}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户ID" width="360">
					<template v-slot:default="scope">
						<span style="margin-left: 10px">{{ scope.row.id }}</span>
					</template>
				</el-table-column>
				<el-table-column label="用户名" width="360">
					<template v-slot:default="scope">
						<span style="margin-left: 10px">{{ scope.row.userName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="角色" width="360">
					<template v-slot:default="scope">
						<el-tag size="medium" v-if="scope.row.role === 0" type="success">普通用户</el-tag>
						<el-tag size="medium" v-else-if="scope.row.role === 1" type="danger">管理员</el-tag>
					</template>
				</el-table-column>
				<el-table-column v-if="this.$store.state.user.role === 1" label="操作">
					<template v-slot:default="scope">
						<el-button size="medium" @click="handleEdit(scope.row)">编辑
						</el-button>
						<el-button size="medium" type="danger" @click="open(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<user-add-form ref="userAddForm" @success-add="requireData"></user-add-form>
		<user-edit ref="userEdit" @success-update="requireData"></user-edit>
	</el-container>
</template>

<script>
import userAddForm from "@/components/user/user-add.vue";
import userEdit from "@/components/user/user-edit.vue";

export default {
	components: { userAddForm, userEdit },
	data() {
		return {
			loading: true,
			originData: null,
			searchId: '',
			searchUserName: '',
			searchRole: null,
			selectList: [
				{
					value: null,
					label: '全部'
				},
				{
					value: 0,
					label: '普通用户'
				},
				{
					value: 1,
					label: '管理员'
				}
			]
		}
	},
	computed: {
		tableData() {
			if (this.searchId || this.searchUserName || this.searchRole !== null) {
				return this.originData.filter(item => {
					console.log(item)
					return (!this.searchId || item.id.toString().search(this.searchId) !== -1) &&
						(!this.searchUserName || item.userName.search(this.searchUserName) !== -1) &&
						(this.searchRole === null || item.role === this.searchRole);
				});
			} else {
				return this.originData;
			}
		}
	},
	methods: {
		resetSearchForm() {
			this.searchId = '';
			this.searchUserName = '';
			this.searchRole = null;
		},
		requireData() {
			this.loading = true;
			this.$axios.get('/api/user/list').then(res => {
				console.log(res);
				if (res.code === 0) {
					this.originData = res.data.map((item, index) => {
						return {
							index: index + 1,
							id: item.id,
							userName: item.userName,
							role: item.role
						}
					});
				} else {
					this.originData = null;
				}
			}).catch(err => {
				this.$message.error("获取用户列表失败");
				this.originData = null;
			}).finally(() => {
				this.loading = false;
			});
		},
		showUserAddDialog(data) {
			this.$refs.userAddForm.showAddUserForm(data);
		},
		handleEdit(row) {
			this.$refs.userEdit.showEditUserForm(row);
		},
		handleDelete(row) {
			this.$axios.delete(`/api/user/${row.id}`).then(res => {
				if (res.code === 0) {
					this.$message.success("删除成功");
					this.requireData();
				} else {
					this.$message.error("删除失败");
				}
			}).catch(err => {
				this.$message.error("删除失败");
			});
			this.requireData()
		},
		refresh() {
			this.requireData();
			if (this.originData !== null) {
				this.$message.success("获取数据成功");
			}
		},
		open(row) {
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.handleDelete(row)
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	},
	mounted() {
		this.requireData();
	}
}
</script>

<style lang="scss" scoped>
.condition_wrap {
	border-radius: 4px;
	background-color: #477f5810;
	margin: 16px 0 0 0;
	padding: 20px 50px 20px 10px;
	align-items: center;
	display: flex;

	.condition_name {
		font-size: 20px;
		color: #005b30;
	}
}

.table_wrap {
	height: 810px;
	padding: 0;
}

.table_title {
	font-size: 24px;
	font-weight: 600;
}

.user_table {
	width: 100%;
	border-style: solid;
	border-color: #005b30;
	border-width: 3px;
	border-radius: 4px;
	padding: 4px 8px;

	font-size: 20px;
}
</style>